<template>
	<view class="container">
		
		<view class="ticket_info" style="display: none;">
			<view class="item">
				<image class="cover" :src="cover"></image>
				<view class="right_info">
					<view class="title">{{title}}</view>
					<view class="price_num">
						<view class="price">¥{{price}}</view>
						<view class="num"></view>
					</view>
					<view class="desc">{{desc}}</view>
				</view>
			</view><!-- item end -->
		</view><!-- ticket_info end-->
		<view class="section_bg">
			<view class="ticket_item line" >
				<image class="cover" :src="cover"></image>
				<view class="right_info">
					<view class="title_bg">
						<view class="title">{{title}}</view>
						<view class="price">¥{{price| decimalFormat}}</view>
						<view class="desc">{{intro}}</view>
					</view>
					<view class="btn">
						<view class="min" @click="minNumEvent()">-</view>
						<view class="num">{{num}}</view>
						<view class="push" @click="addNumEvent()">+</view>
					</view>
				</view>
			</view><!-- item end -->
			
			<view class="ticket_item">
				<image class="cover" :src="cover2"></image>
				<view class="right_info">
					<view class="title_bg">
						<view class="title">{{title2}}</view>
						<view class="price">¥{{price2| decimalFormat}}</view>
						<view class="desc">{{intro2}}</view>
					</view>
					<view class="btn">
						<view class="min" @click="minNumEvent2()">-</view>
						<view class="num">{{num2}}</view>
						<view class="push" @click="addNumEvent2()">+</view>
					</view>
				</view>
			</view><!-- item end -->
		</view><!--section_bg end-->
		<view class="section_bg">
			<view class="top">
				<view class="title">游客信息</view>
			</view>
			<view class="section">
				<view class="text">入园日期</view>
				<view class="input gray" @click="open()" v-if="sub_time==''">请选择日期</view>
				<view class="input" @click="open()" v-else>{{sub_time}}</view>
				<uni-calendar 
					ref="calendar"
				    :insert="false"
					@confirm="confirmDate"
				     />
			</view>
			<view class="section">
				<view class="text">姓名</view>
				<input class="input" v-model="name" placeholder="请输入姓名"/>
			</view>
			<view class="section">
				<view class="text">身份证号码</view>
				<input class="input" v-model="id_card" placeholder="请输入身份证号码"/>
			</view>
			<view class="section">
				<view class="text">手机号码</view>
				<input class="input" v-model="phone" placeholder="请输入手机号码"/>
			</view>
			<view class="section">
				<view class="text">验证码</view>
				<input class="input" v-model="code" placeholder="请输入验证码"/>
				<view class="send_btn" @click="sendCode()" v-show="show">立即发送</view>
				<view class="send_btn_gray" v-show="!show">{{count}}s</view>
			</view>
		</view><!--section_bg end-->
		
		<view class="total_bg">
			合计：<view>¥{{total|decimalFormat}}元</view>
		</view><!--total_bg end-->
		<view class="footer">
			<view class="confirm-btn" @click="confirm">确认购票</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	
	import {registerVerify} from "@/api/user.js";
	import payment from '@/components/payment';
	import {water_buy,pay} from '@/api/water';
	const app = getApp();
	export default {
		components: {
			payment,
		},
		data() {
			return {
				count:'',
				show:true,
				timer:null,	//以上定时器用
				name:'',	//姓名
				id_card:'', //身份证号码
				phone:'',   //电话
				code:'',	//验证码
				is_send:false,
				cover:'',
				cover2:'',
				title:'',
				title2:'',
				price:98.00,
				price2:58.00,
				intro:'',
				intro2:'',
				water_id:0,
				part_id:0,
				num:0,
				num2:0,
				total:0,
				sub_time:''//预计时间
			};
		},
		computed: {
			
		},
		onLoad(options) {
			if (options.data) {
				const jsonDecoded = decodeURIComponent(options.data);
				const jsonData = JSON.parse(jsonDecoded);
				if(jsonData){
					
					if(jsonData.parts.length > 0){
						this.title = jsonData.parts[0].title;
						this.cover = jsonData.parts[0].cover;
						this.price = jsonData.parts[0].price;
						this.intro = jsonData.parts[0].intro;
					}
					if(jsonData.parts.length > 1){
						this.title2 = jsonData.parts[1].title;
						this.cover2 = jsonData.parts[1].cover;
						this.price2 = jsonData.parts[1].price;
						this.intro2 = jsonData.parts[1].intro;
					}
					this.water_id = jsonData.id;
					this.total = this.num * this.price + this.num2 * this.price2;
				}
			}
			
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		filters: {
			decimalFormat(value) {
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		},
		methods: {
			open(){
				this.$refs.calendar.open();
			},
			confirmDate(e) {
				console.log(e);
				this.sub_time = e.fulldate;
			},
			minNumEvent(){
				if(this.num >= 1){
					this.num -= 1;
					this.total = this.num * this.price + this.num2 * this.price2;
				}
			},
			addNumEvent(){
				if(this.num < 11){
					this.num += 1;
					this.total = this.num * this.price + this.num2 * this.price2;
				}
			},
			minNumEvent2(){
				if(this.num2 >= 1){
					this.num2 -= 1;
					this.total = this.num * this.price + this.num2 * this.price2;
				}
			},
			addNumEvent2(){
				if(this.num2 < 11){
					this.num2 += 1;
					this.total = this.num * this.price + this.num2 * this.price2;
				}
			},
			//发送验证码
			sendCode(){
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请输入手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				uni.showLoading({
					title: '发送中...'
				});
				registerVerify({'phone':that.phone,'type':'scenic'}).then(res=>{
					uni.hideLoading();
					that.is_send = true;
					console.info("发送成功");
					
					const TIME_COUNT = 60;
					if (!that.timer) {
					   that.count = TIME_COUNT;
					   that.show = false;
					   that.timer = setInterval(() => {
					   if (that.count > 0 && that.count <= TIME_COUNT) {
						 that.count--;
						} else {
						 that.show = true;
						 clearInterval(that.timer);
						 that.timer = null;
						}
					   }, 1000)
					}
				}).catch(res => {
					uni.hideLoading();
					that.$util.Tips({
						title: res
					});
				});
			},
			//确定购票并支付
			confirm(){
				if(this.sub_time.length == 0){
					uni.showToast({
						title: '请选择入园日期',
						icon: 'none'
					});
					return;
				}
				if(this.name.length == 0){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				if(this.name.length > 20){
					uni.showToast({
						title: '姓名长度过长',
						icon: 'none'
					});
					return;
				}
				if(this.id_card.length == 0){
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					});
					return;
				}
				if(this.id_card.length > 20){
					uni.showToast({
						title: '身份证号码长度过长',
						icon: 'none'
					});
					return;
				}
				if(this.phone == ''  || !/^1[3456789]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				if(!this.is_send){
					uni.showToast({
						title: '请获取验证码',
						icon: 'none'
					});
					return;
				}
				if(this.code == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if(this.num == 0 && this.num2 == 0){
					uni.showToast({
						title: '请选择票数量',
						icon: 'none'
					});
					return;
				}
				
				//清除定时器
				 this.show = true;
				 clearInterval(this.timer);
				 this.timer = null;	
				let data = {
					name:this.name,
					id_card:this.id_card,
					phone:this.phone,
					code:this.code,
					water_id:this.water_id,
					sub_time:this.sub_time,
					adu_num:this.num,
					child_num:this.num2,
					price:this.total
				};
				console.info(data)
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确认购票?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							});
							water_buy(data).then(res => {
								console.info(res);
								uni.hideLoading();
								
								if(res.data['order_sn'] == undefined || res.data['data']['id'] == undefined || res.data['data']['id'] == ""){
								   _this.handle = false;
								   uni.hideLoading();
								   _this.$util.Tips({
									title: res.message
								   });
								   return;
								}
								// 支付
								pay({
									order_sn: res.data.order_sn,
									pay_type: 2
								}).then(res2 => {
									let config = res2.data.result.config
									uni.requestPayment({
										timeStamp: config.timestamp,
										nonceStr: config.nonceStr,
										package: config.package,
										signType: config.signType,
										paySign: config.paySign,
										success: (res1) => {
											_this.handle = false;
											uni.hideLoading();
											uni.reLaunch({
												url:`/pages/2_development/water/result?type=success&s_no=`+res.data['order_sn']
											})
										},
										fail: () => {
											_this.handle = false;
											uni.hideLoading();
											_this.$util.Tips({
												title: '支付失败'
											});
											uni.navigateBack({
												delta: 2
											})
										},
										complete: (res) => {
											_this.handle = false;
											uni.hideLoading();
											if (res.errMsg == 'requestPayment:cancel') return _this
												.$util
												.Tips({
													title: '取消支付'
												});
										}
									}).catch(res => {
									console.info('执行requestPayment catch')
										_this.handle = false;
										uni.hideLoading();
										_this.$util.Tips({
											title: res.message
										});
									})
								//pay catch
								}).catch(res => {
									console.info('执行pay catch')
									console.info(res)
									_this.handle = false;
									uni.hideLoading();
									_this.$util.Tips({
										title: res.message
									});
								});
							//water_buy end 
							}).catch(res => {
								uni.hideLoading();
								_this.$util.Tips({
									title: res
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
						
					}//suecces modal
				});//
				console.info(data);
				
			},
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}

	.ticket_info{
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx 30rpx 0rpx 30rpx;
		.item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			.cover{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			.right_info{
				margin-left: 20rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				.title{
					font-size: 28rpx;
					color: black;
					font-weight: bold;
				}
				.price_num{
					margin-top: 10rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.price{
						font-size: 26rpx;
						color: darkorange;
					}
					.num{
						font-size: 26rpx;
						color: black;
					}
				}
				.desc{
					font-size: 22rpx;
					color: gray;
					margin-top: 10rpx;
				}
			}
		}
	}//ticket_info end
	
	.section_bg{
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		margin-top: 20rpx;
		background-color: white;
		.top{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-bottom: 20rpx;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				color: black;
			}
			.desc{
				font-size: 24rpx;
				color: black;
			}
		}
		.line{
			border-bottom: 1rpx solid #f1f1f1;
		}
		.ticket_item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			.cover{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
				background-color: red;
			}
			.right_info{
				margin-left: 20rpx;
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.title_bg{
					display: flex;
					flex-direction: column;
					.title{
						font-size: 28rpx;
						color: black;
						font-weight: bold;
					}
					.price{
						margin-top: 10rpx;
						font-size: 26rpx;
						color: darkorange;
					}
					.gray{
						color: darkgray;
					}
					.desc{
						font-size: 22rpx;
						color: gray;
						margin-top: 10rpx;
					}
				}
				.btn{
					display: flex;
					flex-direction: row;
					align-items: center;
					
					.min{
						width: 60rpx;
						height: 60rpx;
						background-color: #f1f1f1;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
					}
					.num{
						width: 60rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
					}
					.push{
						width: 60rpx;
						height: 60rpx;
						background-color: #f1f1f1;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
					}
				}
			}
		}//end ticket_item
		
		.section{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 80rpx;
			.text{
				font-size: 28rpx;
				color: black;
				width: 170rpx;
			}
			.input{
				font-size: 28rpx;
				flex: 1;
				margin-right: 30rpx;
			}
			.send_btn{
				font-size: 28rpx;
				width: 140rpx;
				height: 60rpx;
				background-color: #509cf7;
				color: white;
				line-height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
			}
			.send_btn_gray{
				
				font-size: 28rpx;
				width: 140rpx;
				height: 60rpx;
				color: white;
				line-height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				background-color: #CCCCCC;
			}
			.gray{
				color: gray;
			}
		}
		
	}//section_bg
	.total_bg{
		font-size: 30rpx;
		color: red;
		text-align: right;
		display: flex;
		flex-direction: row;
		height: 80rpx;
		justify-content: flex-end;
		align-items: center;
		font-weight: bold;
		background-color: white;
		padding: 50rpx 30rpx;
		margin-top: 20rpx;
	}
	.footer{
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-bottom: 100rpx;
		margin-top: 100rpx;
		
		.confirm-btn{
			width: 80%;
			height: 80rpx;
			background-color: #509cf7;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
		}
	}

</style>
